.row {
    @include box_flex(
        $width: 100%,
        $height: auto,
        $direction: row,
        $justify: flex-start,
        $align: center,
        $flex-wrap:wrap
    );
}
.col {
    @include box_flex(
        $width: auto,
        $height: auto,
        $direction: row,
        $justify: flex-start,
        $align: center,
        $flex-1: 1
    );

    margin-left: 10px;
    &:first-child {
        margin-left: 0;
    }
}
.col.w-auto {
    flex: none;
    width: auto;
}
.col.w-1 {
    width: 100%;
}
.col.w-2 {
    flex: 2;
}
.col.w-3 {
    flex: 3;
}
.col.w-4 {
    flex: 4;
}
.col.w-5 {
    flex: 5;
}
.col.w-6 {
    flex: 6;
}
.col.w-7 {
    flex: 7;
}
.col.w-8 {
    flex: 8;
}
.col.w-9 {
    flex: 9;
}
.col.w-10 {
    flex: 10;
}
.contener {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: row,
        $justify: flex-start,
        $align: center
    );
    padding: $margin-md;
    padding-top: 0;
    transition: all .3s;
    .page {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: column,
            $justify: flex-start,
            $align: flex-start
        );
        @include background_color('cover2');

        padding: $margin-md;
        .search-contener {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: center
            );

            transition: all 0.5s;
        }
        .datas-contener {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: column,
                $justify: flex-start,
                $align: center,
                $flex-1:1
            );
            .option-contener {
                @include box_flex(
                    $width: 100%,
                    $height: auto,
                    $direction: row,
                    $justify: space-between,
                    $align: center
                );
            }
            .table-contener {
                @include box_flex(
                    $width: 100%,
                    $height: auto,
                    $direction: row,
                    $justify: center,
                    $align: center,
                    $flex-1:1
                );

                padding: 10px 0;
            }
            .paging-contener {
                @include box_flex(
                    $width: 100%,
                    $height: auto,
                    $direction: row,
                    $justify: flex-end,
                    $align: center,
                );
            }
        }
    }
    .tree-page {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: row,
            $justify: flex-start,
            $align: flex-start
        );
        @include background_color('cover2');
        .tree-menu {
            @include box_flex(
                $width: $tree-width,
                $height: 100%,
                $direction: column,
                $justify: flex-start,
                $align: flex-start
            );
            @include border_color_only($direction: right, $color: 'border-base');
        }
        .page {
            @include box_flex(
                $width: auto,
                $height: 100%,
                $direction: column,
                $justify: flex-start,
                $align: flex-start,
                $flex-1:1
            );
        }
    }
}
.server-loading {
    text-align: center;
    .el-loading-spinner {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 48px;
        transform: rotate(45deg);
        &::before {
            position: absolute;
            top: -24px;
            left: 0;
            width: 24px;
            height: 24px;
            content: '';
            animation: animloader59 4s ease infinite;
        }
        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 24px;
            height: 24px;
            background: rgb(255 255 255 / 85%);
            box-shadow: 0 0 10px rgb(0 0 0 / 15%);
            content: '';
            animation: animloader56 2s ease infinite;
        }
    }
    svg {
        display: none;
    }
}
@keyframes animloader59 {
    0% {
        box-shadow: 0 24px rgb(255 255 255 / 0%), 24px 24px rgb(255 255 255 / 0%), 24px 48px rgb(255 255 255 / 0%), 0 48px rgb(255 255 255 / 0%);
    }
    12% {
        box-shadow: 0 24px rgb(0 82 217 / 100%), 24px 24px rgb(255 255 255 / 0%), 24px 48px rgb(255 255 255 / 0%), 0 48px rgb(255 255 255 / 0%);
    }
    25% {
        box-shadow: 0 24px rgb(0 82 217 / 100%), 24px 24px rgb(0 82 217 / 100%), 24px 48px rgb(255 255 255 / 0%), 0 48px rgb(255 255 255 / 0%);
    }
    37% {
        box-shadow: 0 24px rgb(0 82 217 / 100%), 24px 24px rgb(0 82 217 / 100%), 24px 48px rgb(0 82 217 / 100%), 0 48px rgb(255 255 255 / 0%);
    }
    50% {
        box-shadow: 0 24px rgb(0 82 217 / 100%), 24px 24px rgb(0 82 217 / 100%) rgb(0 82 217 / 100%), 24px 48px rgb(0 82 217 / 100%), 0 48px rgb(0 82 217 / 100%);
    }
    62% {
        box-shadow: 0 24px rgb(255 255 255 / 0%), 24px 24px rgb(0 82 217 / 100%), 24px 48px rgb(0 82 217 / 100%), 0 48px rgb(0 82 217 / 100%);
    }
    75% {
        box-shadow: 0 24px rgb(255 255 255 / 0%), 24px 24px rgb(255 255 255 / 0%), 24px 48px rgb(0 82 217 / 100%), 0 48px rgb(0 82 217 / 100%);
    }
    87% {
        box-shadow: 0 24px rgb(255 255 255 / 0%), 24px 24px rgb(255 255 255 / 0%), 24px 48px rgb(255 255 255 / 0%), 0 48px rgb(0 82 217 / 100%);
    }
    100% {
        box-shadow: 0 24px rgb(255 255 255 / 0%), 24px 24px rgb(255 255 255 / 0%), 24px 48px rgb(255 255 255 / 0%), 0 48px rgb(255 255 255 / 0%);
    }
}
  
  
@keyframes animloader56 {
    0% {
        transform: translate(0, 0) rotateX(0) rotateY(0);
    }
    25% {
        transform: translate(100%, 0) rotateX(0) rotateY(180deg);
    }
    50% {
        transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
    }
    75% {
        transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
    }
    100% {
        transform: translate(0, 0) rotateX(0) rotateY(360deg);
    }
}